<!DOCTYPE html>
<html>
<head th:include="include/head">

</head>
<body class="hold-transition sidebar-mini layout-fixed">
	<div class="wrapper">


		<div class="content-wrapper">
			<!-- Content Header (Page header) -->
			<section class="content-header">
				<div class="container-fluid">
					<div class="row mb-2">
						<div class="col-sm-6">
							<h1>角色管理</h1>
						</div>
						<div class="col-sm-6">
							<ol class="breadcrumb float-sm-right">
								<li class="breadcrumb-item"><a href="#">首页</a></li>
								<li class="breadcrumb-item active">角色管理</li>
							</ol>
						</div>
					</div>
				</div>
				<!-- /.container-fluid -->
			</section>

			<!-- Main content -->
			<section class="content">
				<div class="container-fluid">
					<div class="row">
						<div class="col-md-12">
							<div class="card">
								<div class="card-header">
									<h3 class="card-title">角色列表</h3>
									<button type="button" class="btn btn-primary" id="add"
										style="float: right;">新增角色</button>
								</div>
								<!-- /.card-header -->
								<div class="card-body">
									<table class="table table-bordered">
										<thead>
											<tr>
												<th style="width: 10px">#</th>
												<th>角色名称</th>
												<th>角色描述</th>
												<th style="width: 160px">操作</th>
											</tr>
										</thead>
										<tbody>
											<tr th:each="bean : ${list}" th:attr="id=tr_+${bean.id}">
												<td th:text="${bean.id}"></td>
												<td th:text="${bean.name}"></td>
												<td th:text="${bean.descritpion}"></td>
												<td><a th:href="'roleDetail?roleId='+${bean.id}" class="btn btn-info btn-sm edit"><i class="fas fa-pencil-alt"></i>编辑</a>
													&nbsp;&nbsp; 
													<a href="javascript:;" th:attr="data-id=|${bean.id}" class="btn btn-danger btn-sm del"><i class="fas fa-trash"></i>删除</a>
													</td>
											</tr>

										</tbody>
									</table>
								</div>
							</div>

						</div>
					</div>
				</div>
			</section>
		</div>
	</div>
	<!-- ./wrapper -->
	<div th:include="include/foot"></div>
	<script>
		$().ready(function(){
			$("#add").click(function(){
			loadPage();
				location.href='roleAdd';
			});
			$(".edit").click(function() {
				loadPage();
				
			});
			$(".del").click(function(){
				if(confirm('确定删除角色吗？')){
					let id=$(this).data('id');
					$.ajax({
						url:'roleDelete?roleId='+id,
						success:function(e){
							if(e.res){
								if (e.mess=='删除成功'){
									$("#tr_"+id).remove();
									layer.msg(e.mess, {icon: 1})
								}else {

									layer.msg(e.mess, {icon: 2})
								}

							}
						},error:function(e){
							layer.msg(e.responseText, {icon: 5});
						}
					});
				}
				
			});
		});
		loadPage=function(){
			window.parent.loadPage();
		}
	</script>
</body>
</html>
